<template>
  <div>
    <van-nav-bar
      :title="obj.name"
      left-arrow
      @click-left="$router.push('/goodShoping')"
    />
    <div class="header_img">
      <img :src="baseurl + obj.image_path" alt="" />
    </div>

    <div class="content">
      <p>{{ obj.description }}</p>
      <h3>{{ obj.name }}</h3>
      <div class="xing">
        <span>评分</span
        ><van-rate
          v-model="obj.rating"
          :size="12"
          color="#ff9a0d"
          void-icon="star"
          void-color="#eee"
          readonly
        />
        <i>{{ obj.rating }}</i>
      </div>
      <div class="price">
        <span>月售 {{ obj.satisfy_count }}单</span>
        <i>售价 ￥{{ obj.specfoods && obj.specfoods[0].price }}起</i>
      </div>
      <div class="good">
        <span>评价数 {{ obj.rating_count }}</span>
        <span>好评率 {{ obj.satisfy_rate }}%</span>
      </div>
    </div>
  </div>
</template>

<script>
import { footList } from "../api/goodShoping";
export default {
  data() {
    return {
      value: 3,
      checked: false,
      obj: {},
      baseurl: "//elm.cangdu.org/img/",
      restaurant_id: this.$route.query.restaurant_id,
      index: this.$route.query.index, //商品分类下标
      i: this.$route.query.i, //商品下标
    };
  },

  created() {
    footList({
      restaurant_id: this.restaurant_id,
    }).then((res) => {
      console.log(res);
      this.obj = res.data[this.index].foods[this.i];
      console.log(65, this.obj);
    });
  },
  methods: {
    onSubmit(price) {
      console.log(price);
    },
  },
};
</script>

<style lang="less" scoped>
/deep/.van-nav-bar {
  background-color: #3792e5;
  .van-nav-bar__title {
    color: #fff;
  }
  .van-nav-bar__arrow {
    color: #fff;
  }
}

.header_img {
  width: 100%;
  height: 300px;
  background-color: pink;
  img {
    width: 100%;
    height: 100%;
  }
}

.content {
  h3 {
    margin: 5px 0;
  }

  .xing {
    font-size: 14px;
    i {
      color: #f60;
      margin-left: 6px;
    }
  }
  .price {
    margin: 8px 0;
    span {
      font-size: 15px;
    }
    i {
      font-size: 15px;
      color: #f60;
      margin-right: 0.2rem;
    }
  }
}

.buy_car {
  position: absolute;
  background-color: #3d3d3f;
  bottom: 0;
  left: 0;
  z-index: 13;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  height: 48px;
  .login {
    width: 20%;
    height: 100%;
    position: relative;
    i {
      position: absolute;
      width: 50px;
      height: 50px;
      border-radius: 50%;
      left: 15px;
      bottom: 15px;
      background-color: #3d3d3f;
    }
    span {
      position: absolute;
      width: 32px;
      height: 32px;
      left: 25px;
      bottom: 30px;
      font-size: 27px;
      color: #fff;
      border-radius: 50%;
      background-color: #3190e8;
    }
  }
  .content {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .content_left {
      display: flex;
      flex-direction: column;
      color: #fff;
      span {
        margin-bottom: 8px;
      }
      i {
        font-size: 12px;
      }
    }
    .content_right {
      background-color: #4cd964;
      height: 48px;
      width: 40%;
      line-height: 48px;
      text-align: center;
      span {
        color: #ffffff;
        font-weight: 700;
      }
    }
  }
}
</style>